<template>
  <el-col :span="24">
    <el-form ref="formuploud" :model="formuploud" label-width="80px" @submit.prevent style="margin:20px; min-width:600px;">
      <el-form-item label="关于我们">
        <div v-for="item in formuploud.imgurl" :key="item.id" class="an-imgbox">
          <span class="el-upload-list__item-actions"><i class="el-icon-delete" @click="andelectimg(item)"></i></span>
          <img class="an-imgbox-img" v-bind:src="weburl+item" />
        </div>
        <div class="an-upleimg">
          <el-upload
            action="http://www.anranweb.cn/anfile/php/wxupload.php?q=uploadabout"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handlesuccess"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
        <p class="an-color">只支持.jpg格式图片，且图片大小只能是150*150px。</p>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="uploudimg">保存</el-button>
        <el-button @click.native.prevent>取消</el-button>
      </el-form-item>
    </el-form>
  </el-col>
</template>


<script>
  import { getaboutimg, aboutimgupdata, delectimg } from '@/api/wxdata'

  export default {
    data() {
      return {
        weburl:'/wximages/',
        dialogImageUrl: '',
        dialogVisible: false,
        formuploud:{
          imgurl:[],
          addurl:[]
        }
      }
    },
    created: function() {
      getaboutimg().then(response => {
        let str = response.data.listsrc.split(',');
        //利用文件后缀名来分割数组
        for(let i = 0 ;i<str.length;i++)
        {
          if(str[i].indexOf(".jpg") == "-1" )
          {
            str.splice(i,1);
            i= i-1;
          }
        }
        this.formuploud.imgurl = str;
        console.log(str);
      })
    },
    methods: {
      uploudimg() {
        let anarry = this.formuploud.imgurl+","+this.formuploud.addurl;
        aboutimgupdata(anarry).then(response => {
          this.$message.success(response.msg);
          window.location.reload();
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        let str = file.response;
        let anarray = this.formuploud.addurl;
        anarray.remove(str);
        delectimg(str).then(response => {
          this.$message.success(response.msg)
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handlesuccess(response, file, fileList){
        this.formuploud.addurl.push(response);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 < 500;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 500K!');
        }
        return isJPG && isLt2M;
      },
      andelectimg(str){
        //已有图片删除函数
        let anarray = this.formuploud.imgurl;
        anarray.remove(str);
        delectimg(str).then(response => {
          this.$message.success(response.msg)
        })
      }
    }
  }
  //从数组中移除去掉的图片名称
  Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
      if (this[i] == val) return i;
    }
    return -1;
  };
  Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
      this.splice(index, 1);
    }
  };
</script>


<style scoped>
  .el-col{ margin-bottom:15px; padding-bottom:15px;}
  .an-imgbox{ width: 150px; height: 150px; float: left; margin: 5px 8px; position: relative;}
  .an-imgbox-img{width: 150px; height: 150px;}
  .an-imgbox .el-upload-list__item-actions {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }
  .an-imgbox:hover .el-upload-list__item-actions{opacity: 1;}
  .an-imgbox .el-upload-list__item-actions i{margin-top: 60px; cursor: pointer;}
  .an-upleimg{margin: 5px 8px;}
</style>
